<template>
  <div class="notification-page" style="width: 100%;height: 100%">
    <h1 class="page-title">消息通知</h1>
    <div class="table-container">
      <el-table :data="notifications" class="notification-table" border>
        <el-table-column prop="notification_id" label="通知ID" width="100"></el-table-column>
        <el-table-column prop="title" label="标题" width="200"></el-table-column>
        <el-table-column prop="message" label="内容" width="400"></el-table-column>
        <el-table-column prop="created_at" label="日期" width="150"></el-table-column>
        <el-table-column prop="read_status" label="读取状态" width="100">
          <template slot-scope="scope">
            <span>{{ scope.row.read_status === 'read' ? '已读' : '未读' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100">
          <template slot-scope="scope">
            <el-button type="primary" @click="markAsRead(scope.row)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { Table, TableColumn, Message, Button } from 'element-ui';
import axios from 'axios';

export default {
  name: 'NotificationPage',
  components: {
    'el-table': Table,
    'el-table-column': TableColumn,
    'el-button': Button
  },
  data() {
    return {
      notifications: [],
      userId: null // 添加 userId 属性
    }
  },
  methods: {
    fetchNotifications() {
      if (!this.userId) {
        Message.error('用户ID未获取到');
        return;
      }
      axios.get(`http://localhost:8080/notifications/notifications?user_id=${encodeURIComponent(this.userId)}`)
          .then(response => {
            console.log('Full response:', response); // 添加日志，查看完整响应
            console.log('notifications response:', response.data); // 添加日志，查看响应数据
            if (response.data.code === "200") {
              const notifications = response.data.data;  // 确保提取的是数组
              console.log('Filtered notifications:', notifications);
              this.notifications = notifications; // 不再过滤，直接显示所有通知
            } else {
              console.error('Error response code:', response.data.code);
              Message.error('获取通知列表失败');
            }
          })
          .catch(error => {
            console.error('Error fetching notifications:', error);
            Message.error('获取通知列表失败');
          });
    },
    markAsRead(notification) {
      axios.post('http://localhost:8080/notifications/markAsRead', { notification_id: notification.notification_id })
          .then(response => {
            if (response.data.code === "200") {
              notification.read_status = 'read';
              Message.success('通知已标记为已读');
            } else {
              Message.error('标记通知为已读失败');
            }
          })
          .catch(error => {
            console.error('Error marking notification as read:', error);
            Message.error('标记通知为已读失败');
          });
    }
  },
  created() {
    // 假设 userId 是从某个全局状态或存储中获取的
    this.userId = localStorage.getItem('user_id'); // 示例：从 localStorage 获取 user_id
    console.log('User ID:', this.userId); // 添加日志，查看 user_id
    if (this.userId) {
      this.fetchNotifications();
    } else {
      Message.error('用户ID未获取到');
      // 可以选择跳转到登录页面
      // this.$router.push('/login');
    }
  }
}
</script>

<style>
body {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: #333;
  margin: 0; /* 移除 body 的默认 margin */
}

.notification-page {
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 0; /* 确保页面内容紧贴顶部 */
}

.page-title {
  text-align: center;
  font-size: 24px;
  margin-bottom: 20px;
}

.table-container {
  width: 100%;
  max-width: 1400px;
  margin-top: 0; /* 确保表格容器紧贴顶部 */
}

.notification-table {
  width: 100%;
}

.el-table th, .el-table td {
  text-align: center;
}

.el-table th {
  background-color: #f5f7fa;
  color: #606266;
  font-weight: 500;
}

.el-button {
  font-size: 14px;
}
</style>